<template>
  <div>
    <el-form @submit.prevent>
      <el-form-item>
        属性名：
        <el-input
          placeholder="请输入属性名"
          class="attrValue-input"
          v-model="toAddAttrData.attrName"
          @keydown.native.enter="addAttrValue"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          size="small"
          :disabled="!toAddAttrData.attrName"
          @click="addAttrValue"
        >
          添加属性值
        </el-button>
      </el-form-item>
    </el-form>
    <el-table :data="toAddAttrData.tableData" class="add-attr-table">
      <el-table-column
        type="index"
        label="序号"
        width="100"
        align="center"
      ></el-table-column>
      <el-table-column label="属性值名称">
        <template #default="{ row, $index }">
          <div v-if="!row.isEdit" @dblclick="dblclickHandle(row)">
            {{ row.valueName }}
          </div>
          <el-input
            v-else
            ref="attrInputRef"
            size="small"
            @keydown.native.enter="row.isEdit = false"
            @blur="inputBlur(row, $index)"
            v-model="row.valueName"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ $index }">
          <el-button
            icon="el-icon-delete"
            type="danger"
            size="small"
            @click="delAttrValueName($index)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-button
        type="primary"
        size="small"
        @click="saveOrUpdateAttr"
        :disabled="!toAddAttrData.tableData.some((item) => item.valueName)"
      >
        保存
      </el-button>
      <el-button size="small" @click="$emit('changeShowNum', 0)">
        取消
      </el-button>
    </div>
  </div>
</template>
<script>
import { saveAttrInfoApi } from '@/api/product/attrApi'
import { mapState } from 'vuex'
export default {
  name: 'AddOrUpdat',
  props: {
    toAddAttrData: {
      type: Object,
      default() {
        return {
          attrName: '',
          tableData: []
        }
      }
    }
  },
  computed: {
    ...mapState('category', ['category'])
  },
  methods: {
    // 添加属性值
    async addAttrValue() {
      const data = {
        isEdit: true,
        valueName: ''
      }
      this.toAddAttrData.tableData.push(data)
      await this.$nextTick()
      this.$refs.attrInputRef.focus()
    },
    // 失去焦点
    inputBlur(data, index) {
      data.isEdit = false
      if (!data.valueName) {
        this.toAddAttrData.tableData.splice(index, 1)
      }
    },
    // 双击获取焦点
    async dblclickHandle(row) {
      row.isEdit = true
      await this.$nextTick()
      this.$refs.attrInputRef.focus()
    },
    // 删除属性值名称
    delAttrValueName(index) {
      this.toAddAttrData.tableData.splice(index, 1)
    },
    // 保存属性
    async saveOrUpdateAttr() {
      const params = {
        attrName: this.toAddAttrData.attrName,
        attrValueList: this.toAddAttrData.tableData,
        categoryId: this.category.category3Id,
        categoryLevel: 3,
        id: this.toAddAttrData.id
      }
      await saveAttrInfoApi(params)
      this.$message.success('保存成功')
      this.$emit('changeShowNum', 0)
    }
  }
}
</script>

<style scoped>
.attrValue-input {
  width: 200px;
}
.add-attr-table {
  margin-bottom: 20px;
}
</style>
